@charset "UTF-8";

$nav-height: 30px;

.category-wrap {
  margin-top: 10px;
}

.navbar-wrap {
  width: calc(100% + 20px);
  margin: 0 -10px;

  .search-bar {
    // 44 - 32 = 12
    padding: 6px 0;

    ::v-deep .uni-searchbar__box {
      height: 32px;
    }
  }
}

.category-wrap {
  padding-bottom: calc(50px + env(safe-area-inset-bottom));
}

.page-category-all {
  margin-top: 10px;
}

.category-all-section {
  background-color: #fff;
  overflow: hidden;

  .title {
    display: flex;
    padding: 20rpx;
    align-items: center;

    .category-name {
      flex: 1;
      font-size: 28rpx;
      font-weight: bold;
    }
  }

  .category-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding: 0 20rpx;
    margin: 0 -10rpx;

    .category {
      width: calc(100% / 3 - 20rpx);
      padding: 20rpx 10rpx;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;

      .image {
        // 750 / 3 = 250
        width: 100%;
        height: 250rpx;
        border-radius: 10rpx;
        margin-bottom: 20rpx;
        overflow: hidden;
      }

      text {
        font-size: 24rpx;
        color: #777;
      }
    }
  }

  &.category-style-wrap {
    .title {
      padding: 18rpx 20rpx;
      border-bottom: 1rpx solid #eee;
    }
  }
}